<script setup>
import {ref,onMounted,computed}  from 'vue';
import { queryClazzApi,queryDegreeApi } from '@/api/report';

const data=ref([]);
let data2=ref([]);

const searchDegree= async ()=>{
  const result=await queryDegreeApi();
  if(result.code){
    data.value=result.data;
  }
};

const searchClazz= async ()=>{
  const result=await queryClazzApi();
  if(result.code){
    let clazzList=result.data.clazzList;
    let dataList=result.data.dataList;
    data2.value=clazzList.map((item,index)=>{
      return {name:item,value:dataList[index]}
    });
    console.log(data2.value);
  }
};

onMounted(()=>{
  searchDegree();
  searchClazz();
})

const option=computed(()=>{
    return{ 
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '学历',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data.value
        }
      ]
    }
});

const option2=computed(()=>{
  return { 
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '人数',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data2.value
        }
      ]
    }
});

</script>


<template>
  <h1>学生信息统计</h1>
  <div class="container">
    <h3>学生学历统计图</h3>
    <v-chart :option="option" />
  </div>
  <div class="container">
    <h3>班级人数统计图</h3>
    <v-chart :option="option2" />
  </div>
</template>

<style scoped>
.container{
  margin-top: 40px;
  width: 100%;
  height: 400px;
}
h3{
  text-align: center;
}
</style>